{% extends 'home.html' %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>工具管理</h3>
        <a class="btn btn-success" href="{% url 'tool_add' %}">添加工具</a>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>工具名称</th>
                            <th>编号</th>
                            <th>测量范围</th>
                            <th>证书编号</th>
                            <th>有效期</th>
                            <th>校准机构</th>
                            <th>计量特性</th>
                            <th>适用型号</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tool in tools %}
                        <tr>
                            <td>{{ tool.id }}</td>
                            <td><strong>{{ tool.title }}</strong></td>
                            <td><code>{{ tool.tool_number }}</code></td>
                            <td>{{ tool.range }}</td>
                            <td>{{ tool.certificate_number }}</td>
                            <td>{{ tool.end_date }}</td>
                            <td>{{ tool.cal_jigou }}</td>
                            <td>{{ tool.property }}</td>
                            <td>
                                <span class="badge badge-type-{{ tool.type }}">{{ tool.type }}</span>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm" href="{% url 'tool_edit' tool.id %}">编辑</a>
                                <a class="btn btn-danger btn-sm" href="{% url 'tool_delete' tool.id %}" 
                                   onclick="return confirm('确定删除工具「{{ tool.title }}」吗？')">删除</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center text-muted">暂无工具数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .table {
        font-size: 1.3rem;
    }
    
    .table th {
        font-size: 1.3rem;
        font-weight: 600;
        padding: 18px;
    }
    
    .table td {
        font-size: 1.2rem;
        padding: 18px;
    }
    
    .badge {
        font-size: 0.8rem;
        padding: 5px 10px;
        border-radius: 12px;
        font-weight: 500;
    }
    
    .badge-type-1 { background: #28a745; color: white; } /* KFC */
    .badge-type-2 { background: #ffc107; color: #333; } /* PH */
    .badge-type-3 { background: #17a2b8; color: white; } /* DWY */
    .badge-type-4 { background: #6f42c1; color: white; } /* KFV */
    .badge-type-5 { background: #20c997; color: white; } /* HMA */
    .badge-type-6 { background: #e83e8c; color: white; } /* LZ */
    .badge-type-7 { background: #fd7e14; color: white; } /* DDL */
    
    .table tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    .btn-sm {
        margin-right: 5px;
        font-size: 0.9rem;
        padding: 6px 12px;
    }
    
    code {
        background: #f8f9fa;
        color: #495057;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 0.9rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
</style>
{% endblock %}